<script setup lang="ts">
import { PropType } from 'vue'
import { toLine } from '../../../utils/index.ts'

let props = defineProps({
  // 导航菜单数据
  data: {
    type: Array as PropType<any[]>,
    required: true
  },
  // 默认选中
  defaultActive: {
    type: String,
    default: ''
  },
  // 是否是路由模式
  router: {
    type: Boolean,
    default: false
  },
  // 菜单标题的键名
  name: {
    type: String,
    default: 'name'
  },
  // 菜单标识的键名
  index: {
    type: String,
    default: 'index'
  },
  // 菜单图标的键名
  icon: {
    type: String,
    default: 'icon'
  },
  // 菜单子菜单的键名
  children: {
    type: String,
    default: 'children'
  }
})
</script>

<template>
  <el-menu
    :default-active="props.defaultActive"
    :router="props.router"
    v-bind="$attrs"
    class="el-menu-vertical-demo"
  >
    <template v-for="item in props.data">
      <el-menu-item
        v-if="!item[props.children] || !item[props.children].length"
        :index="item[props.index]"
      >
        <component
          v-if="item[props.icon]"
          :is="`el-icon-${toLine(item[props.icon])}`"
        ></component>
        <span>{{ item[props.name] }}</span>
      </el-menu-item>
      <el-sub-menu
        v-if="item[props.children] && item[props.children].length"
        :index="item[props.index]"
      >
        <template #title>
          <component
            v-if="item[props.icon]"
            :is="`el-icon-${toLine(item[props.icon])}`"
          ></component>
          <span>{{ item[props.name] }}</span>
        </template>
        <el-menu-item
          v-for="(item1, index1) in item[props.children]"
          :index="item1[props.index]"
          :key="index1"
        >
          <component
            v-if="item1[props.icon]"
            :is="`el-icon-${toLine(item1[props.icon])}`"
          ></component>
          <span>{{ item1[props.name] }}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<style lang="scss" scoped>
svg {
  margin-right: 4px;
  width: 1em;
  height: 1em;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
